<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 设置页面的字符编码为UTF-8，这是确保页面在各种浏览器中都能正确显示各类字符，避免出现乱码情况的基础配置，是HTML页面必不可少的设置项 -->
    <meta charset="UTF-8">
    <title>个人中心</title>
    <!-- 引入基础样式表文件，此文件通常包含了一些全局通用的样式规则，例如统一设置页面的默认字体、字号、颜色，重置浏览器默认的元素内外边距等，为整个网站的页面提供统一的基础外观风格 -->
    <link rel="stylesheet" href="../css/base.css">
    <!-- 引入表单相关的样式表文件，主要用于针对页面里表单元素（像各类输入框、下拉选择框、按钮等）进行特定样式的定制，使其能按照设计要求呈现出合适的外观与布局效果 -->
    <link rel="stylesheet" href="../css/form.css">
</head>

<body>
    <!-- 页面头部区域的容器，使用了自定义的类名“header”和“container”，“header”用于明确这是页面头部的部分，“container”一般是让该元素在页面中水平居中显示，这里展示的文字是“个人中心”，清晰表明了页面的主题 -->
    <div class="header container">个人中心
        <p style="display: block;">
            <!-- 提供两个链接，通过“a”标签来实现页面跳转功能。第一个链接指向“./rpwd.html”页面，链接文字为“修改密码”，方便用户进入修改密码页面去更改自己账号的密码；第二个链接指向“./index.html”页面，也就是首页，用户点击可返回网站首页 -->
            <a href="./rpwd.html">修改密码</a>
            <a href="./index.html">回到首页</a>
        </p>
    </div>
    <form>
        <label>
            <!-- 用户名输入框的标签及对应的输入框元素，“username”类名可用于在 CSS 样式表中为该输入框设置特定的样式，比如控制其宽度、高度、边框样式等外观属性。这里输入框设置了“disabled”属性，表示该输入框是禁用状态，用户无法直接编辑用户名，通常用户名是注册后不轻易变动的关键信息 -->
            用户名： <input type="text" class="username" disabled>
        </label>
        <label>
            <!-- 年龄输入框的标签及对应的输入框元素，“age”类名用于在 CSS 中对该输入框进行样式定制，输入框类型为“text”，用户可以在此输入自己的年龄信息，方便在个人中心页面进行展示或后续修改等操作 -->
            年龄： <input type="text" class="age">
        </label>
        <label>
            <!-- 性别选择的标签及对应的下拉选择框元素，“gender”类名便于在 CSS 样式表中为该下拉选择框设置相应样式，下拉框内通过“option”标签提供了几个选项，第一个是默认的提示选项“请选择”，后面还有“男”和“女”两个实际的性别选项供用户选择，用于用户在个人中心完善或修改自己的性别信息 -->
            性别： <select class='gender'>
                <option value="">请选择</option>
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </label>
        <label>
            <!-- 昵称输入框的标签及对应的输入框元素，“nickname”类名用于在 CSS 里定义该输入框的样式，输入框类型为“text”，用户可以输入自己想要展示的昵称内容，昵称相对来说是可以根据个人喜好进行修改的信息 -->
            昵称： <input type="text" class="nickname">
        </label>
        <button>确认修改</button>
    </form>
    <!-- 引入与个人中心功能相关的 JavaScript 脚本文件，采用模块类型（type="module"），意味着该脚本文件内部大概率运用了 ES6 模块语法来组织代码，便于进行代码的模块化管理与维护，在这个脚本中通常会包含如表单数据验证（检查年龄输入是否合理、性别是否选择等）、向服务器发送修改个人信息请求等相关的业务逻辑代码 -->
    <script src="../js/self.js" type="module"></script>
</body>

</html>